//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{
                        isAuth:true,
                        title:'消息'
                    },//程序员自己写的数据 isAuth用于判断是否需要授权 title用于展示网页标题
                    beforeEnter:(to,from,next)=>{ //独享路由守卫
                        if(to.meta.isAuth){//判断是否需要鉴权 isAuth为true则需要
                                if(localStorage.getItem('wang')==='wang'){
                                    //放行
                                    next()
                                }else{
                                    alert("账号不对，无权限查看")
                                }
                                }else{
                                    next()
                                }
                    },
                    children:[
                        {
                            name:'detail', //起个名字，之后组件使用跳转时 ：to="{name:'detail'}" 就相当于/demo/message/detail了
                            //params的path使用
                            //path:'detail/:id/:title',

                            //query的path使用
                            path:'detail',

                            component:Detail,
                            //props的第一种写法，值为对象，该对象中的所以key-value都会以props的形式传给Detail组件
                            //props:{a:1,b:'hello'}, //不常用了解即可

                            //第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到所有params参数，以props的形式传给Detail组件
                            //省了组件那边用$route.params.id这样了,缺点只有params这样使用，query不可以
                            // props:true

                            //props的第三种写法，值为函数,这样query和params传递的参数都可以在组件中用props接收使用了
                            // props($route){
                            //     return {
                            //         id:$route.params.id,
                            //         title:$route.params.title
                            //     }
                            // }
                            
                            //props的第三种写法，query写法验证
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }
                        }
                    ]
                },
                {
                    path:'news',
                    component:News,
                    meta:{
                        isAuth:true,
                        title:'新闻'
                    },
                    beforeEnter:(to,from,next)=>{ //独享路由守卫
                        if(to.meta.isAuth){//判断是否需要鉴权 isAuth为true则需要
                                if(localStorage.getItem('wang')==='wang'){
                                    //放行
                                    next()
                                }else{
                                    alert("账号不对，无权限查看")
                                }
                                }else{
                                    next()
                                }
                    }
                }
            ]
        }
    ]
})
// //全局前置路由守卫  初始化时被调用、切换路由前被调用
// router.beforeEach((to,from,next)=>{
//     // if(to.path==='/home/news'||to.name==='xiaoxi'){ 这么写麻烦，要是很多条件
//     if(to.meta.isAuth){//判断是否需要鉴权 isAuth为true则需要
//         if(localStorage.getItem('wang')==='wang'){
//             //放行
//             next()
//         }else{
//             alert("账号不对，无权限查看")
//         }
//     }else{
//         next()
//     }
    
   
// })
//全局后置路由守卫 初始化时被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('我是全局后置路由守卫',to,from)
document.title=to.meta.title || 'Hello' //给网页标题，每次切换路由后获取切换的路由title名字
})

export default router